<template>
  <div>
    <div :model="data" style="text-align: center">
      <el-image
        :src="imgbase + data.Images"
        style="margin: 0px auto; width: 200px; height: 200px"
      ></el-image>
      <br />
      <label
        style="
          font-size: 20px;
          color: orange;
          font-weight: 600;
          font-family: 'Times New Roman', Times, serif;
        "
        >{{ data.Name }}</label
      >
      <p style="color: orange; font-family: 'Times New Roman', Times, serif">
        {{ data.Content }}
      </p>
    </div>
    <hr style="height: 1px; background-color: orange; border: none" />
    <div>
      <div v-show="data.Use_Property">
        <div v-for="(item, index) in data.GoodPropertyKey" :key="index">
          <p>{{ item.Name }}</p>

          <el-radio-group
            style="margin-right: 10px"
            v-for="(v, i) in item.GoodPropertyValue"
            text-color="white"
            fill="orange"
            :key="i"
            v-model="Value[index]"
          >
            <el-radio-button :label="v.Value"></el-radio-button>
          </el-radio-group>
        </div>
        <p></p>
        <hr style="height: 1px; background-color: orange; border: none" />
      </div>
    </div>
    <div style="height: 100px">
      <div style="height: 80%; width: 90%; margin: 0px auto">
        <div style="float: left">
          <label style="font-size: 18px; padding: 10px"
            >￥{{ this.jg() }}</label
          >
          <br />
          {{ Value.join(",") }}
        </div>
        <div style="float: right">
          <el-button icon="el-icon-minus" circle @click="jian"></el-button>
          <label style="font-size: 16px; padding: 10px">{{ number }}</label>
          <el-button
            style="background-color: orange"
            icon="el-icon-plus"
            circle
            @click="jia"
          ></el-button>
        </div>
      </div>
      <div style="height: 20%">
        <el-button
          style="background-color: orange; width: 100%; color: white"
          @click="CartAdd"
          >加入购物车</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import basepath from "../../plugins/base.js";

export default {
  name: "detail",
  data() {
    return {
      CId: 0,
      Cart: {
        cid: 0,
        price: 0,
        quantity: 0,
        datetime: new Date(),
        dstatus: true,
      },
      CartDetail: {
        cdid: 0,
        gid: 0,
        cid: 0,
        price: 0,
        quantity: 0,
        specification: "",
      },
      Value: [],
      number: 1,
      price: null,
      bool: false,
    };
  },
  methods: {
    jg(){
      this.price = this.data.Price * this.number;
      return this.price;
    },
    jia() {
      this.number++;

      this.price = this.data.Price * this.number;
    },
    jian() {
      if (this.number - 1 <= 0) {
        this.number = this.number;
      } else {
        this.number--;
      }
    },
    CartAdd() {
      if (this.data.Use_Property) {
        if (this.Value.join(",") === "") {
          this.bool = false;
          this.$message({
            message: "请选择奶茶规格!",
            type: "error",
          });
        } else {
          this.bool = true;
        }
      } else {
        this.bool = true;
      }

      if (this.bool) {
        this.axios({
          method: "post",
          url: "Cart",
          params: {},
          data: this.Cart,
        })
          .then((res) => {
            console.log("res: ", res);

            this.CId = res.data;

            this.CartDetail.gid = this.data.GID;
            this.CartDetail.price = this.price;
            this.CartDetail.quantity = this.number;
            this.CartDetail.cid = this.CId;
            this.CartDetail.specification = this.Value.join(",");

            this.axios({
              method: "post",
              url: "CartDetail",
              params: {},
              data: this.CartDetail,
            })
              .then((res) => {
                if (res.data.code > 0) {
                  this.$message({
                    message: res.data.msg,
                    type: "success",
                  });

                  this.Value = [];
                  this.number = 1;

                  this.$store.state.CId = this.CId;

                  this.axios({
                    method: "get",
                    url: "CartDetail",
                    params: { id: this.CId },
                  })
                    .then((res) => {
                      this.$store.state.Count = res.data;
                    })
                    .catch((err) => {
                      console.log("err: ", err);
                    });
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "error",
                  });
                }
              })
              .catch((err) => {
                console.log("err: ", err);
              });
          })
          .catch((err) => {
            console.log("err: ", err);
          });
      }
    },
  },
  props: {
    dialogVisible: Boolean,
    data: Object,
  },
  created() {
    this.imgbase = basepath.imgUrl;
  },
};
</script>

<style scoped>
</style>